<!DOCTYPE html>
<html lang="cmn-hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script src="./js/select.js" defer></script>
  <link rel="stylesheet" href="./css/select.css">
  <title>下拉菜单选框</title>
</head>
<body>
  <div class="app">
    <div class="select-btn">
      <span class="title">选择语言</span>
      <span class="arrow"><ion-icon name="chevron-down"></ion-icon></span>
    </div>

    <ul class="lists">
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">HTML + CSS</span>
      </li>
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">JavaScript</span>
      </li>
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">TypeScript</span>
      </li>
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">Vue.js</span>
      </li>
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">C Language</span>
      </li>
      <li class="item">
        <span class="chkbox"><ion-icon name="checkmark"></ion-icon></span>
        <span class="text">Python</span>
      </li>
    </ul>
  </div>
</body>
</html>